<template>
    <div class="flex flex-col overflow-hidden rounded-lg">
        <Slider class="basic hue" v-model="h" max="360" @update:model-value="emitColor">
            <template #button>
                <div class="h-8 w-8 bg-white rounded-full flex place-content-center shadow">{{ h }}</div>
            </template>
        </Slider>

        <Slider
            class="basic saturate"
            v-model="s"
            :style="{
                background: Sat
            }"
            @update:model-value="emitColor"
        >
            <template #button>
                <div class="h-8 w-8 bg-white rounded-full flex place-content-center shadow">{{ s }}</div>
            </template>
        </Slider>
        <Slider
            class="basic lim"
            v-model="l"
            :style="{
                background: Lim
            }"
            @update:model-value="emitColor"
        >
            <template #button>
                <div class="h-8 w-8 bg-white rounded-full flex place-content-center shadow">{{ l }}</div>
            </template>
        </Slider>
    </div>
</template>

<style scoped>
.basic {
    --van-slider-active-background-color: transparent;
    --van-slider-inactive-background-color: transparent;
    box-shadow: 0 0 6px 1px black inset;
    @apply h-4 my-4;
}
.hue {
    background: linear-gradient(
        to left,
        #f00 0%,
        #ff0 17%,
        #0f0 33%,
        #0ff 50%,
        #00f 67%,
        #f0f 83%,
        #f00 100%
    );
}

.saturate:before {
    z-index: 0;
    border-radius: 9999px;
    top: 0;
    height: 100%;
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.lim:before {
    z-index: 0;
    border-radius: 9999px;
    top: 0;
    height: 100%;
    background: linear-gradient(to right, black, rgba(255, 255, 255, 0), white);
}
</style>

<script lang="ts" setup>
import chroma from 'chroma-js';
import { Slider } from 'vant';
import { computed, ref, watch } from 'vue';
import { useColorPanelStore, colorUpdate } from '../store'

const store = useColorPanelStore()



const [H, S, L] = chroma.rgb(...store.usingColor).hsl()
const h = ref(H)
const s = ref(S * 100)
const l = ref(L * 100)
colorUpdate.on('resetHsl', () => {
    const [H, S, L] = chroma.rgb(...store.usingColor).hsl()
    h.value = Math.round(H)
    s.value = Math.round(S * 100)
    l.value = Math.round(L * 100)
})
const emitColor = () => {
    store.setColor(chroma.hsl(h.value, s.value / 100, l.value / 100).rgb(), false)
}


const Sat = computed(() => {
    return chroma.hsl(h.value, 1, l.value / 100).css('hsl')
})
const Lim = computed(() => {
    return chroma.hsl(h.value, s.value / 100, 0.5).css('hsl')
})
</script>
